<template>
  <div style="width: 430px;height: 932px;">
    <!--  <van-nav-bar-->
    <!--    title=""-->
    <!--    left-text="返回"-->
    <!--    left-arrow-->
    <!--    @click-left="onClickLeft"-->
    <!--  />-->
    <!--    <van-list>-->
    <!--      <van-cell v-for="(item, index) in addmanageList" :key="index" v-show="item.status==0">-->
    <!--        <p>姓名：{{item.name}}|手机号：{{item.tel}}</p>-->
    <!--        <p>收货地址：{{item.address}}</p>-->
    <!--        <p><van-button @click="toupdatemanage(item.id)">修改地址</van-button></p>-->
    <!--      </van-cell>-->
    <!--    </van-list>-->
    <!--  <van-form v-model="shoppingList">-->
    <!--    <p>商品名称：{{shoppingList.comname}}</p>-->
    <!--    <p>规格：{{shoppingList.details}}</p>-->
    <!--    <p>单价：￥{{shoppingList.price}}</p>-->
    <!--    <p>购买数量：{{shoppingList.number}}</p>-->
    <!--    <p>总价：{{shoppingList.priceorder}}</p>-->
    <!--    <p>运费：{{shoppingList.freight}}</p>-->
    <!--    <p>配送方式：{{shoppingList.psfs}}</p>-->
    <!--    <p>备注：{{shoppingList.ordernotes}}</p>-->
    <!--    <p>订单编号：{{shoppingList.id}}</p>-->
    <!--    <p>下单时间：{{shoppingList.createdata}}</p>-->
    <!--    <p>付款时间：{{shoppingList.paymentime}}</p>-->
    <!--  </van-form>-->
    <div class="order-detail">
      <van-nav-bar
        title=""
        left-text="订单详情"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="order-header">
        <h3>等待发货</h3>
      </div>
      <div v-for="(item,index) in addmanageList" :key="index" v-show="item.status==0" class="customer-info">
        <p>{{ item.name }} {{ item.tel }}</p>
        <p>{{item.address}}</p>
      </div>
      <div class="product-info">
        <div class="product-details">
          <p>{{ shoppingList.comname }}</p>
          <p>{{ shoppingList.details }}</p>
          <p class="product-price">¥{{shoppingList.price}}</p>
        </div>
      </div>
      <div class="order-summary">
        <div class="summary-item">
          <span class="left1">购买数量</span>
          <span class="right1">{{ shoppingList.number }}</span>
        </div>
        <div class="summary-item">
          <span class="left1">商品总价</span>
          <span class="right1">¥{{shoppingList.priceorder}}</span>
        </div>
        <div class="summary-item">
          <span class="left1">运费</span>
          <span class="right1">¥{{shoppingList.freight}}</span>
        </div>
        <div class="summary-item">
          <span class="left1">配送方式</span>
          <span class="right1">{{shoppingList.psfs}}</span>
        </div>
        <div class="summary-item">
          <span class="left1">订单备注</span>
          <span class="right1">{{shoppingList.ordernotes}}</span>
        </div>
        <div class="summary-item">
          <span class="left1">订单编号</span>
          <span class="right1">{{ shoppingList.id }}</span>
        </div>
        <div class="summary-item">
          <span class="left1">下单时间</span>
          <span class="right1">{{shoppingList.createdata}}</span>
        </div>
        <div class="summary-item">
          <span class="left1">付款时间</span>
          <span class="right1">{{shoppingList.paymentime}}</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      shoppingId: localStorage.getItem("shoppingId"),
      shoppingList: {},
      addmanageList: [],
      detailsId: 0,
      form: {},
      productImage: '', // 这里可以设置产品图片路径
      quantity: 1
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    toupdatemanage(id) {
      this.detailsId = id;
      this.$router.push({
        path: '/shoppingaddress',
        query: {
          id: this.detailsId
        }
      })
      localStorage.setItem("detailsId", this.detailsId)
    },
    findAddManage() {
      axios.post("/addmanage/findAddManage", this.form).then(res => {
        this.addmanageList = res.data.data.list;
      })
    },
    findShoppingById() {
      axios.post("/shoppingorder/findshoppingorderById?id=" + this.shoppingId).then(res => {
        this.shoppingList = res.data.data.shoppingOrder;
      })
    }
  },
  created() {
    this.findShoppingById();
    this.findAddManage();
  }
}
</script>


<style scoped>
.left1 {
  display: inline-block;
  //background-color: yellow;
  width: 100px;
  text-align: left;
  float: left;
}
.right1 {
  display: inline-block;
}
.summary-item{
  display: block;
  margin-bottom: 10px;
}

.order-detail {
  padding: 20px;
}

.order-header {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.customer-info {
  margin-top: 20px;
  //background-color: burlywood;
  text-align: left;
  border-radius: 10px;
  padding: 5px;
  border: 1px solid #ccc;
}

.product-info {
  margin-top: 20px;
  width: 100%;
  height: 150px;
  border: 1px solid #ccc;
  border-radius: 10px;

  img {
    margin-top: 20px;
    //background-color: burlywood;
    float: left;
    width: 100px;
    height: 100px;
  }

  .product-details {
    float: left;
    width: 50%;
    //background-color: yellow;
  }
}

.product-image {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.product-details {
  vertical-align: middle;
}

.product-price {
  font-size: 18px;
  color: red;
}

.order-summary {
  margin-top: 30px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 5px;
}


</style>
